<template>
	<view v-if="!isLogin">
		<view v-if="mode ==='user'">
			<input type="text" v-model="loginData.username" placeholder="请输入用户铭" />
			<input type="text" v-model="loginData.password" placeholder="请输入密码" />
			<button @click="loginUser">登录</button>
		</view>
		<view v-else>
			<input type="text" v-model="loginData.tel" placeholder="请输入手机号" :disabled="curtDownTime !== duration"/>
			<view style="display: flex;">
				<input type="text" placeholder="请输入验证码" v-model="loginData.code"/>
				<button :disabled="curtDownTime !== duration" size="mini" @click="getCode">
					{{ curtDownTime === duration ? '获取验证码': curtDownTime + '秒之后重新获取' }}
				</button>
			</view>
			<button type="primary" @click="loginTelCode">登录</button>
		</view>
	</view>
	<view v-else class="user">
		<image :src="avatar" mode=""></image>
		<text>{{ nickname }}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// user
				mode: 'user',
				loginData: {
					username: '',
					password: '',
					tel: '',
					code: ''
				},
				isLogin: false,
				avatar: '',
				nickname: '',
				// 倒计时 值
				curtDownTime: 60,
				// 倒计时 总时长
				duration: 60
			};
		},
		methods: {
			startCurtDownTime(time) {
				this.curtDownTime = time
				this.curtDownTime--
				const timer = setInterval(() => {
					this.curtDownTime--
					if (this.curtDownTime <= 0) {
						clearInterval(timer);
						this.curtDownTime = this.duration
					}
				}, 1000)
			},
			async loginTelCode() {
				const resp = await uniCloud.callFunction({
					name: 'login_by_tel_code',
					data: this.loginData
				});
				const {
					code,
					data,
					message
				} = resp.result
				if (code === 200) {
					uni.showToast({
						title: message
					})
					this.avatar = data.avatar
					this.nickname = data.nickname
					this.isLogin = true
				} else {
					uni.showToast({
						title: message,
						icon: 'error'
					})
				}
			},
			async getCode() {
				if (!/^1[3-9]\d{9}$/.test(this.loginData.tel)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'error'
					})
					return
				};
				// 倒计时
				this.startCurtDownTime(this.duration);
				// 云函数
				const resp = await uniCloud.callFunction({
					name: 'login_tel_get_code',
					data: this.loginData
				})
				const { code, message, data } = resp.result;
				if(code === 200) {
					uni.showToast({
						title: `验证码是：` + data.telCode
					})
					this.loginData.code = data.telCode
				} else {
					uni.showToast({
						title: message
					})
				}
			},
			async loginUser() {
				const resp = await uniCloud.callFunction({
					name: 'login_by_user',
					data: this.loginData
				});
				const {
					code,
					data,
					message
				} = resp.result
				if (code === 200) {
					uni.showToast({
						title: message
					})
					this.avatar = data.avatar
					this.nickname = data.nickname
					this.isLogin = true
				} else {
					uni.showToast({
						title: message,
						icon: 'error'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.user {
		height: 200px;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 100px;
			height: 100px;
			border-radius: 50%;
		}
	}
</style>